<html>
  <head>
    <title>浮动定位排版实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      .top{
        width:75%;
        float:left;
        background-color:#ffdddd;
      }
      .left{
        margin-left:5%;
        width:15%;
        float:left;
        background-color:#ddffdd;
      }
      .main{
        float:left;
        width:75%;
        background-color:#ddddff;
      }
      .bottom{
        margin-left:5%;
        width:90%;
        float:left;
        background-color:#bbdddd;
      }
      .left>.selected{
        background-color:#88ff88;
      }
      .top>.selected{
        background-color:#ffaaaa;
      }
      .top>div{
        width:25%;
        height:64px;
        float:left;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div>靈異伝</div>
      <div>封魔録</div>
      <div>夢時空</div>
      <div>幻想郷</div>
      <div>怪綺談</div>
      <div>紅魔郷</div>
      <div class="selected">妖々夢</div>
      <div>永夜抄</div>
      <div>萃夢想</div>
      <div>花映塚</div>
      <div>文花帖</div>
      <div>風神録</div>
      <div>緋想天</div>
      <div>地霊殿</div>
      <div>星蓮船</div>
      <div>非想天則</div>
      <div>神霊廟</div>
      <div>心綺楼</div>
      <div>輝針城</div>
    </div>
    <div class="top">
      <div class="selected">博麗霊夢</div>
      <div>霧雨魔理沙</div>
      <div>魂魄妖夢</div>
      <div>西行寺幽々子</div>
    </div>
    <div class="main">
      楽園の巫女<br/>
      魔理沙の嫁三号<br/>
      無節操<br/>
      十万円<br/>
      腋巫女<br/>
      紅白<br/>
      貧乏巫女<br/>
      空を飛べる程度の能力<br/>
      霊気を操る程度の能力<br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
    <div class="bottom">
      コピーライトとかの情報はこちらに入力してください。<br/>
      <br/>
      <br/>
    </div>
  </body>
</html>
